<template>
  <!--  :id="id" -->
  <div ref="vcharts" class="chart" :style="{ height: height + 'px' }">
  </div>
</template>
  
<script>
import china from '@/assets/datas/china.json';

export default {
  name: "operatingCosts",
  components: {},
  // props: ["option", "id", {

  // }],
  props: {
    "option": {

    },
    "id": {},
    'height': {
      default() {
        return '300';
      },
    },
    'origin':{}
  },
  data() {
    return {
      myChart: null
    };
  },
  watch: {
    option: {
      handler: function (newValue, oldValue) {
        this.$nextTick(this.drawChart);
      },
      immediate: true,
      deep: true,
      resizeTimer: null
    }
  },
  mounted() {

  },
  beforeDestroy(){
    this.myChart.clear && this.myChart.clear();
  },
  methods: {
    resizeChart() {
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }
      this.resizeTimer = setTimeout(() => {
        this.myChart.resize && this.myChart.resize();
      }, 200);
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      if (!this.myChart) {
        // this.myChart = this.$echarts.init(document.getElementById(this.id));
        if(this.origin==='screen'){
          this.myChart =this.$echarts.init(this.$refs.vcharts,'tech')
        }else{
          this.myChart =this.$echarts.init(this.$refs.vcharts)
        }
        
        this.$echarts.registerMap('china', china);
      }
      window.addEventListener('resize', this.resizeChart);



      // 指定图表的配置项和数据
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option);
    },
  },
};
</script>
<style lang="scss" scoped>
.chart {
  // width: 600px;
  // height: 300px;
  // background: transparent;
  width: 100%;
  // background: white;
}
</style>
  